<template>
  <div class="page-tools">
    <el-card>
      <el-row type="flex" justify="space-between" align="middle">
        <el-col>
          <div :class="`before ${type}`">
            <i :class="`el-icon-${type}`" />
            <!-- <span>共25条记录</span> -->
            <slot name="before" />
          </div>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <slot name="after" />
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 封装组件的思路 从功能出发
// 1. 搭建基本结构
// 2. 该组件需要 用户自定义 提供插槽的功能
// 3. 该组件需要 在父组件里控制他的类型 提供对应的字段 props

// 问你组件封装的思路
// 回答
// 一般做都是业务类型组件的封装，从功能角度出来，比如：
// 如果组件需要提供自定义 功能的话，就会采用插槽
// 如果外部需要用属性控制组件的话， 一般就是props
// 如果组件需要 向外部提供数据 $emit/$on 或者 props里类型为函数的属性
export default {
  name: 'PageTools',
  props: {
    type: {
      type: String,
      required: true,
      validator: (value) => {
        // console.log(value)
        if (['info', 'warning', 'error', 'success'].includes(value)) {
          return true
        }
        return false
      }
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style lang='scss'>
 .page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
      display: inline-block;
      border-radius: 3px;
      i {
        margin-right: 5px;
      }
      &.info {
        padding: 0px 10px;
        border: 1px solid rgba(145, 213, 255, 1);
        background: rgba(230, 247, 255, 1);
        i {
          color: #409eff;
        }
      }

      &.success {
        padding: 0px 10px;
        border: 1px solid #c2e7b0;
        background: #f0f9eb;
        i {
          color: #67c23a;
        }
      }

      &.warning {
        padding: 0px 10px;
        border: 1px solid #f5dab1;
        background: #fdf6ec;
        i {
          color: #e6a23c;
        }
      }

      &.error {
        padding: 0px 10px;
        border: #fbc4c4;
        background: #fef0f0;
        i {
          color: #f56c6c;
        }
      }
  }
 }
</style>

